<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
import { onMounted, ref } from "vue"
import { useRoute } from "vue-router"
import axios from "axios"
import flvjs from "flv.js"

let route = useRoute();
const actUserId = route.query.actUserId
const roomId = route.query.roomId

interface sign {
  actUserId: string;
  roomId: string;
}

interface Todos {
  id: number
  title: string
}

let liveUrl = ref();

let videoElement = ref<HTMLMediaElement>();

const getElementvideo = () => {
  // var videoElement = document.getElementById("videoElement");
  var flvPlayer = flvjs.createPlayer({
    type: "flv",
    url: liveUrl.value,
  });
  flvPlayer.attachMediaElement(videoElement.value as HTMLMediaElement);
  flvPlayer.load();
  flvPlayer.play();
};

let avatar = ref();

let uname = ref();

// 弹框
const show = ref(false);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const showPopup = () => {
  show.value = true;
};

const showShare = ref(false);
const options = [
  [
    { name: "微信", icon: "wechat" },
    { name: "朋友圈", icon: "wechat-moments" },
    { name: "微博", icon: "weibo" },
    { name: "QQ", icon: "qq" },
  ],
  [
    { name: "复制链接", icon: "link" },
    { name: "分享海报", icon: "poster" },
    { name: "二维码", icon: "qrcode" },
    { name: "小程序码", icon: "weapp-qrcode" },
  ],
];

// const onSelect = (option: string) => {
//   showShare.value = false;
// };

const Bullet = ref();
// 添加弹幕
const value = ref();

const todos = ref<Todos[]>([]);

const oid = ref(1);

const index = ref(0);

const addTodo = () => {
  if (value.value) {
    todos.value.push({
      id: oid.value,
      title: value.value,
    })
    oid.value++;
  }
  value.value = "";
  show.value = false;
};

const singArr = ref<sign[]>([]);

const addSingns = (actUserId: any, roomId: any) => {

  let index = singArr.value.findIndex((ele: sign) => {
    return ele.actUserId == actUserId;
  });

  if (index != -1) {
    singArr.value.splice(index, 1);
  }

  singArr.value.unshift({ actUserId: actUserId, roomId: roomId });
  localStorage.singArr = JSON.stringify(singArr.value);
}

const loading = ref(true)

onMounted(() => {
  axios
    .get(
      `https://apis.netstart.cn/mogujie/live/actorLiveInfo?roomId=${roomId}&actorId=${actUserId}`
    )
    .then(({ data }) => {
      console.log(data.data);
      liveUrl.value = data.data.liveUrl;
      avatar.value = data.data.actorInfo.avatar;
      uname.value = data.data.actorInfo.uname;
      loading.value = false
      getElementvideo();
    });

  axios.get(`https://apis.netstart.cn/mogujie/live/comments`).then((data) => {
    console.log(data);
    Bullet.value = data.data;
    loading.value = false
  });

  let his = localStorage.singArr;

  if (his) {
    singArr.value = JSON.parse(his);
    singArr.value.findIndex((element: any) => {
      if (element.actUserId == actUserId) {
        index.value = 1;
      }
    });
  }
});
</script>

<template>
  <div class="container-video">
    <div class="video">
      <video autoplay controls muted ref="videoElement" width="375" height="666
      "></video>
    </div>
    <div class="container-actUser">
      <div class="actUser-img">
        <img :src="avatar" alt="" />
      </div>
      <div class="actUser-name">
        <div class="actUser-name-fir">{{ uname }}</div>
      </div>
      <div class="actor-fans">
        <!-- @click="linkleing" -->
        <div class="focus-btn">
          <!-- @click="(add = !add), (edd = !edd)" -->
          <p v-if="index == 0" @click="addSingns(actUserId, roomId), (index = 1)">
            关注
          </p>
          <p v-if="index == 1">已关注</p>
        </div>
      </div>
    </div>
    <div class="foot-section">
      <div class="icon-sell">
        <div class="icon-sell-bag"></div>
        <!-- <div class="comment-box">说点什么...</div> -->
        <input class="comment-box" type="text" v-model="value" placeholder="说点什么...">
        <div class="addS" @click="addTodo">发送</div>
      </div>
      <div class="fans-click">
        <div>
          <van-cell is-link @click="showShare = true">
            <div class="icon-Share"></div>
          </van-cell>
        </div>

        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
        <div class="icon-comment"></div>
      </div>
    </div>
    <div class="bullet-screen-content" ref="chatContent">
      <!-- <div class="bullet-screen-title">{{ fixedNoticeList }}</div> -->

      <div class="screen" v-for="(b, index) in Bullet" :key="index">
        <div class="screen-content">
          <span class="screen-content-time">{{ b.username }}</span>
          <span class="screen-content-title">{{ b.action }}</span>
        </div>
      </div>
      <div class="screen" v-for="(item, i) in todos" :key="i">
        <div class="screen-content">
          <span class="screen-content-time">{{ item.id }}</span><span class="screen-content-title">{{ item.title
          }}</span>
        </div>
      </div>
    </div>
    <div>
      <van-popup v-model:show="show" position="bottom" :style="{ height: '5%' }">
        <div class="cell-group">
          <input type="text" v-model="value" />
          <button @click="addTodo">发送</button>
        </div>
      </van-popup>
    </div>
    <van-loading size="24px" vertical v-if="loading">加载中...</van-loading>
  </div>
</template>

<style lang="scss" scoped>
.container-video {
  background-color: #f5f5f5;

  .video {
    position: relative;
  }

  .van-cell {
    background: none;
  }

  .addS {
    background: #cccccc82;
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    margin-left: 5px;
  }

  .container-actUser {
    position: absolute;
    top: 10px;
    left: 15px;
    width: 160px;
    height: 35px;
    background: rgba(0, 0, 0, 0.1);
    padding: 5px 5px 5px 10px;
    border-radius: 10px;
    display: flex;
    user-select: none;
    align-items: center;

    .actUser-img {
      width: 33px;
      height: 33px;

      img {
        display: block;
        width: 100%;
        border-radius: 50%;
      }
    }

    .actUser-name {
      margin-left: 5px;

      .actUser-name-fir {
        color: #fff;
        font-size: 12px;
        font-weight: 600;
      }
    }

    .actor-fans {
      // display: flex;
      margin: 5px 5px 5px 15px;

      .focus-btn {
        width: 50px;
        height: 25px;
        font-size: 12px;
        background-image: -webkit-linear-gradient(317deg, #ff5777, #ff469f);
        background-image: linear-gradient(133deg, #ff5777, #ff469f);
        color: #fff;
        text-align: center;
        line-height: 25px;
        border-radius: 10px;

        .linkle {
          width: 50vw;
          height: 30rem;
          border-radius: 5rem;
          margin-right: 10rem;
          background-color: #ebebeb47;
          text-align: center;
          color: white;
          font-size: 16rem;
          line-height: 30rem;
        }

        .linkles {
          color: red;
        }
      }
    }
  }

  :deep(.van-share-sheet__options) {
    display: flex;
    justify-content: space-around;
  }

  .foot-section {
    position: absolute;
    left: 0;
    bottom: 55px;
    // background-color: red;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 55px;

    .icon-sell {
      display: flex;
      align-items: center;

      .icon-sell-bag {
        background-image: url(https://s10.mogucdn.com/mlcdn/c45406/200901_2fib9eb2clidj808d84f5ffaj224e_90x90.gif);
        background-size: cover;
        width: 35px;
        height: 35px;
      }

      .comment-box {
        width: 115px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        background: rgba(0, 0, 0, 0.2);
        padding: 0.1rem 0.25rem;
        border-radius: 1rem;
        margin: 0.15rem 0 0 0.15rem;
      }
    }

    .fans-click {
      display: flex;
      align-items: center;
      margin-right: 30px;

      .icon-Share {
        background-image: url(https://s10.mogucdn.com/mlcdn/c45406/180831_46dejfii12hki90hig4h3e8lahaia_60x63.png);
        width: 35px;
        height: 35px;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        background-size: 70% 70%;
        background-repeat: no-repeat;
        background-position: 50%;
        margin-right: 5px;
      }

      .icon-comment {
        background-image: url(https://s10.mogucdn.com/mlcdn/c45406/200828_0h84kb85cb5cjkjkg4534a40j85jg_33x32.png);
        width: 35px;
        height: 35px;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        background-size: 70% 70%;
        background-repeat: no-repeat;
        background-position: 50%;
      }
    }
  }

  .bullet-screen-content {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 15px;
    bottom: 115px;
    padding-top: 5px;
    padding-left: 5px;
    overflow: scroll;

    .bullet-screen-title {
      font-size: 12px;
    }

    .screen {
      font-size: 12px;
      display: flex;
      line-height: 24px;

      .screen-content {
        background-color: rgba(0, 0, 0, 0.1);
        margin-top: 5px;
        display: flex;

        .screen-content-time {
          color: #ff5777;
        }

        .screen-content-title {
          color: #fff;
        }
      }
    }
  }

  .cell-group {
    background-color: #333;
    height: 35px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-evenly;

    input {
      background-color: rgba(255, 87, 119, 0.8);
      outline: none;
      border: 0;
    }

    button {
      background-color: rgba(255, 87, 119, 0.8);
      color: #fff;
      font-size: 14px;
      border-radius: 5px;
      padding: 5px;
    }
  }
}
</style>
